<!--
  文件描述：
  创建时间：2025/2/19 18:46
  创建人：FanHao
-->
<template>
  <el-container v-if="status==='add'||status==='edit'">
    <el-form :model="form" label-width="80px">
      <el-row>
        <el-col>
          <el-form-item label="内容">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 400px;width: 100%; overflow-y: hidden;"
                v-model="form.content"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-row>
    </el-form>
  </el-container>
  <el-container v-else>
    <div v-html="form.content"></div>
  </el-container>
</template>

<script>

import {AddSummary, GetSummary, UpdateSummary} from "@/api/index.js";
import {ElMessage} from 'element-plus'
import {Editor, Toolbar} from '@wangeditor-next/editor-for-vue'

export default {
  components: {
    Editor, Toolbar,
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    conferenceId: {
      type: String,
      required: true
    },
    status: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default',
      form: {
        id: this.id,
        conferenceId: this.conferenceId,
        content: "",
      },
    };
  },
  methods: {
    handleCreated(editor) {
      this.editorRef = editor // 记录 editor 实例，重要！
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      if (this.status === 'add') {
        this.addSummary()
      }
      if (this.status === 'edit') {
        this.editSummary()
      }
    },
    addSummary() {
      AddSummary(this.form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("添加成功")
          this.$emit('update:visible', false);
        }
      })
    },
    editSummary() {
      UpdateSummary(this.form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功")
          this.$emit('update:visible', false)
        }
      })
    },
    fetch() {
      if (this.status !== 'add') {
        GetSummary(this.id).then((res) => {
          if (res.code === 200) {
            this.form = res.data
          }
        })
      } else {
        setTimeout(() => {
          this.form.content = '<p></p>'
        }, 50)
      }
    }
  },
  created() {
  },
  mounted() {
    this.fetch()
  },
  beforeUnmount() {
    // 组件销毁时，也及时销毁编辑器
    if (this.editorRef) {
      this.editorRef.destroy()
    }
  },

}
</script>

<style src="@wangeditor-next/editor/dist/css/style.css"></style>
